<template>
    <div class="header">
        <div class="wrap header-wrap">
            <div class="l">
                欢迎来到叩丁严选
            </div>
            <div class="r">
                <ul>
                    <li class="avatar"> 
                        <img :src="userInfo.headImg" width="26" alt="">
                         用户名：{{userInfo.nickName}}
                    </li>
                    <li>
                        我的鸡腿：{{userInfo.coin}}
                    </li>
                    <li>获取鸡腿</li>
                    <li>叩丁狼官网</li>
					<li class="cart_btn" v-show="bool">
					    <img src="../assets/img/cart.png" alt="" width="20" />
					    <span>购物车</span>
					    <b>{{count}}</b>
					</li>
                    <li class="login-btn" @click="changebool(true)" v-show="!bool">登录</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
	import { mapMutations,mapState,mapActions } from 'vuex'
	import {userAPI} from '../request/api.js'
	
export default {
    data () {
        return {
        }
		
    },
	//测试
	async created(){
		console.log(await userAPI());
		//监听，在页面刷新之前把用户储存起来
		window.addEventListener("beforeunload",()=>{
			localStorage.setItem('userInfo',JSON.stringify(this.$store.state))
		})
		
		//判断用户是否登录   替换数据
		if(localStorage.getItem("x-auth-token")){
			if(localStorage.getItem('userInfo')){
				this.$store.replaceState(
				    Object.assign({},this.$store.state,
					JSON.parse(localStorage.getItem('userInfo')))
				)
			}
		}
		else{
			localStorage.removeItem("userInfo")
		}
	},
	
	methods:{
		// changebool(val){
		// 	this.$store.commit('showLoginModel/changebool',val)
		// }
		
		//获取登录状态
		...mapMutations({changebool:"showLoginModel/changebool"}),
		//改变登录状态
		...mapMutations({changeisbool:"Loginbool/changeisbool"}),
		...mapMutations({Resinfo:"userInfo/Resinfo"}),
		...mapActions({changeCart:"cartsShop/changeCart"})
	},
	computed:{
		...mapState({
			//判断状态
			bool:state=>state.Loginbool.bool,
			//获取vuex中的用户信息，保存到daTa中
			userInfo:state=>state.userInfo.userInfo,
			cartTotal:state=>state.userInfo.cartTotal,
			
			
			//购物车数量绑定
			count:state=>state.cartsShop.cartsInfo.count,
			
			})
	},
	watch:{
		"$route.path":{
			//路由变化时候
				
			handler(newVal,oldVal){
				//保存一个新的token
				var mytoken=localStorage.getItem('x-auth-token')
				console.log(mytoken);
				this.changeCart();
				//修改登录状态
				this.changeisbool(Boolean(mytoken));
				if(!mytoken){
					this.Resinfo();
				}
			}
		}
	}
}
</script>
 
<style lang = "less" scoped>
	.cart_btn {
	        width: 124px;
	        height: 40px;
	        background: #0a328e;
	        color: #fff;
	        display: flex;
	        justify-content: center;
	        align-items: center;
	        cursor: pointer;
	        span {
	          margin-left: 8px;
	          margin-right: 6px;
	        }
	        b{
	            width: 22px;
	            height: 22px;
	            line-height: 22px;
	            border-radius: 50%;
	            background-color: #f40;
	            text-align: center;
	        }
	    }
    .header{
        height: 40px;
        background: #242B39;
       
        .header-wrap{
            color:#FFFEFE;
            height: 40px;
            font-size: 14px;
        /*     background-color: #fcf; */
            display: flex;
            justify-content: space-between;
            align-items: center;
            .r ul{
                display: flex;
                align-items: center;
                li{
                    margin-right: 20px;
                    cursor: pointer;
                }
                .avatar{
                    display: flex;
                    align-items: center;
                    
                    img{
                        border-radius: 50%;
                        margin-right: 5px;
                    }
                }

                .login-btn{
                    width: 124px;
                    height: 40px;
                    text-align: center;
                    line-height: 40px;
                    background: #0A328E;
                }
            }
        }
    }
</style>